<template>
  <div id="kinds">
    <van-search class="search" shape="round" placeholder="大礼包" v-model="value" @search="onSearch"/>
    <div class="searchbox">
      <van-tree-select 
        :items="items"
        :main-active-index.sync="activeIndex">
        <template #content>
          <!-- <div class="item" v-for="item in activeItems" :key='item.text'> -->
          <div class="item" v-for="(item,index) in items" :key='item.text' v-show='activeIndex===index'>
            <img :src="item.imgUrl" alt="" class='itemImage'>
            <div class="itembox" v-for='little in item.children' :key='little.itemName'>
              <h2>{{ little.itemName }}</h2>
              <ul>
                <li v-for="smallest in little.subitemData" :key='smallest.itemName' :data-id='smallest.data' v-on:click='tolist(smallest.data)'>
                  <img :src="smallest.imageUrl" alt="">
                  <p class="name">{{ smallest.name }}</p>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script>


import axios from 'axios'

import Vue from 'vue';
import { Search,TreeSelect } from 'vant';

Vue.use(TreeSelect);

Vue.use(Search);



export default {
  data() {
    return {
      value:'',
      activeIndex: 0,
      items:[],
      activeIndex: 0,
    };
  },
  methods: {
    tolist(data){
      this.$router.push({
        path:'/list',
        query:{
          cat:data
        }
      })
    },
    onSearch(){
      this.$router.push({
        path:'/list',
        query:{
          keyword:this.value
        }  
      });
    },
  },
  mounted() {
    axios({
      url:'/ajax/category/list'
    })
    .then(data=>{
      let menuList = data.data.datas.menuList;
      menuList.forEach((item,index)=>{
        this.items[index]={};
        this.items[index].text=item.menuName;
        this.items[index].imgUrl=item.menuAd[0].imageUrl;
        this.items[index].children=[];
        item.menuItemList.forEach((kind,key)=>{
          this.items[index].children[key]={}
          this.items[index].children[key].itemName=kind.itemName
          this.items[index].children[key].subitemData=kind.subitemData
        })
      })
      this.$forceUpdate();
    })
  },
}
</script>
<style lang='stylus' scoped>
#kinds
  overflow hidden
  height 100%
  .search
    position fixed
    width 100%
  .searchbox
    height 100%
    margin-top 0.55rem
    border-top 1px solid #F7F7F7
    overflow hidden
    .van-tree-select 
      height calc(100% - 0.5rem) !important
      overflow hidden
      .van-sidebar
        background #F7F7F7
        -webkit-box-flex none
        -webkit-flex none
        flex none
      .van-tree-select__nav
        a
          width 0.88rem
        .van-sidebar-item--select::before
          width 0.02rem
          height 0.2rem
      .van-tree-select__content
        overflow scroll
        margin-left 0.115rem
        margin-right 0.115rem
        margin-top 0.15rem
        .item
          .itemImage
            width 100%
          .itembox
            margin-top 0.125rem
            h2
              font-size 0.14rem
              margin 0px
              padding 0px
            ul
              display flex
              flex-wrap wrap
              padding-top 0.075rem
              padding-bottom 0.075rem
              li
                width 33%
                img
                  width 0.66rem
                p
                  width 0.66rem
                  text-align center
                  font-size 0.12rem
                  line-height 0.30rem


</style>
<style lang='stylus'>
#app
  height 100%
  #home 
    height 100%
    #index_box
      height 100%
    .appliances
      height 100%
      overflow scroll
</style>
